<template>
  <div class="recommend">
      <ThumbnailLoading v-if="list.length===0 || other_list.length===0"></ThumbnailLoading>
      <div v-else>
        <Banner :bannerList="list.banner"></Banner>
        <PanleSounds :sound="list.sound" :my_class="'sound'" :title="'人气M音'">
          排行榜
        </PanleSounds>
        <PanleChannels :channel="list.channel" :my_class="'channel'" :title="'频道'" :type="'more'">
          更多
        </PanleChannels>
        <PanleSounds
          v-for="music in other_list"
          :key="music.id"
          :my_class="'sound'+music.id" 
          :title="music.title"
          :sound="music.objects_point"
          :type="'more'"
          :cid="music.id"
        >更多</PanleSounds>
      </div>
  </div>
</template>

<script>
import PanleSounds from "components/home/recommend/PanleSounds"
import Banner from "components/home/recommend/Banner"
import PanleChannels from "components/home/recommend/PanleChannels"
import ThumbnailLoading from "components/public/ThumbnailLoading"
import { get } from "util/http"
export default {
  data(){
    return {
      list:{},
      other_list:[]
    }
  },
  async mounted(){
    //第一屏数据 
    let result=await get({
      url:"/ajax/mobileWeb/newHomepage3"
    });
    this.list=result.info
    //其它屏数据
    let other_result=await get({
      url:"/ajax/sound/newhomepagedata"
    });
    this.other_list=other_result.music
    await this.$nextTick()
    this.$attrs.scroll.refresh()
    
  },
  components:{
    Banner,
    PanleSounds,
    PanleChannels,
    ThumbnailLoading
  },
  methods:{
    goDetail(){

    }
  }
}
</script>

<style lang="stylus" scoped>
.recommend
  min-height 100%
  flex 1
  display flex
  flex-direction column
  justify-content center
</style>